<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <menu-component></menu-component>
      </el-aside>
      <el-container>
        <el-header class="header-content">
          <el-dropdown>
            <div>
              <span class="role-name">欢迎：{{ roleName }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MenuComponent from "@/components/MenuComponent.vue";
import { logout } from "@/api/admin";
export default {
  components: {
    MenuComponent,
  },
  computed: {
    roleName() {
      return this.$store.state.roleName;
    },
  },
  methods: {
    // 退出登录
    logout() {
      this.$confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await logout().then((res) => {
            if (res.code === 200) {
              this.$store.dispatch("resetAdminInfo");
              this.$router.replace("/login");
              this.$message.success("退出登录成功");
            }
          });
        })
        .catch(() => {
          // 取消退出
          this.$message.info("已取消退出");
        });
    },
  },
};
</script>

<style scoped>
.header-content {
  text-align: right;
}

.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  height: 100vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.role-name {
  vertical-align: middle;
  color: #333;
}
.role-name:hover {
  cursor: pointer;
}
</style>